<template>
  <div>
    <el-dialog
      :visible.sync="dialogTableVisibletextarea"
      custom-class="sorting-code-number"
      maxHeight="null"
      title="合同查询"
      width="990px"
      :before-close="beforeClose"
    >
      <div class="el-dialog__body-header">
        <div style="display: flex">
          <div class="dialog-top-left">
            <div class="dialog-input">
              <span class="label">合同编号：</span>
              <el-input
                placeholder="请输入合同编号模糊查询"
                v-model="formData.contractCode"
              />
            </div>
            <div class="dialog-input">
              <span class="label">合同名称：</span>
              <el-input
                placeholder="请输入合同名称模糊查询"
                v-model="formData.contractName"
                @blur="handleTrim('contractName')"
              />
            </div>
          </div>
          <div class="dialog-top-right">
            <div class="dialog-input">
              <span class="label">签订单位：</span>
              <el-input
                placeholder="请输入签订单位模糊查询"
                v-model="formData.partyAName"
              />
            </div>
            <div class="dialog-input">
              <span class="label">供应商：</span>
              <el-input
                placeholder="请输供应商模糊查询"
                v-model="formData.partyBName"
              />
            </div>
          </div>
        </div>
        <div
          style="
            width: 100%;
            display: flex;
            justify-content: center;
            padding-bottom: 10px;
          "
        >
          <el-button
            size="mini"
            type="primary-font-mini"
            @click="searchDataGetList"
            >搜索
          </el-button>
          <el-button size="mini" type="default-mini" @click="resetData"
            >重置
          </el-button>
        </div>
      </div>
      <div class="el-dialog__body-bodys">
        <div class="bodys-right">
          <el-table
            :data="tableData"
            :fit="true"
            :lineClamp="lineClampBody"
            maxHeight="390px"
            style="width: 950px"
          >
            <el-table-column label="序号" width="50">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <template v-for="(table, index) in unfixedTableThead">
              <el-table-column
                :fixed="table.fixed || false"
                :key="index"
                :type="table.type"
                :label="table.label"
                :align="table.align || 'left'"
                :header-align="table.headerAlign || 'left'"
                :min-width="table.width"
                :prop="table.prop"
                :show-overflow-tooltip="true"
                border="true"
              >
              </el-table-column>
            </template>
            <el-table-column label="操作" width="70">
              <template slot-scope="scope" style="margin-top: -11px">
                <el-button
                  :class="scope.row.button === false ? '' : 'checked'"
                  @click="handleClick(scope.row)"
                  plain
                  size="mini"
                  type="single-number-filleted"
                  >{{ scope.row.button === false ? "选择" : "已选择" }}
                </el-button>
                <!-- <el-button @click="handleClick(scope.row)" plain type="single-number">{{ scope.row.button === false ? "选择" : "已选择"}}</el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <!--          分页器-->
          <!-- <div class="table-footer"  style="height: 30px">
            <div class="ccui-table-footer">
              <div id="ccui-paging">
                <el-pagination
                  :current-page="pageNoCode"
                  :total="totalNum"
                  :page-size="pageSizeCode"
                  :page-sizes="[10, 20, 50, 100, 200, 500]"
                  @addCurrentPage="internalCurrentPage"
                  @current-change="handleCurrentChange"
                  @next-click="handleNext"
                  @prev-click="handlePrev"
                  @size-change="handleSizeChange"
                  background
                  layout="total, sizes, prev, pager, next, jumper"
                  next-text="下一页 >"
                  popper-class="ccui-paging-page-size-popper"
                  prev-text="< 上一页"
                />
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { setSessionItem, getSessionItem } from "@/basa/utils";
import { listSmpEquipmentForCheck } from "../api/index";
export default {
  props: {
    reportInOrgId: {
      type: [String, Number]
    },
    isTrue: {
      type: Boolean
    }
  },
  data() {
    return {
      showIndex: 0,
      lineClampBody: true,
      tableData: [],
      searchData: [],
      treeProps: {
        label: "name",
        children: "zones",
        isLeaf: "leaf"
      },
      dialogTableVisibletextarea: false,
      formData: {
        pageNo: 1, // 分页页码
        pageSize: 10 // 分页每页显示多少数据
      },
      textarea: "",
      formLabelWidth: "120px",
      pageSizeCode: 10,
      pageNoCode: 1,
      present: "",
      TableData: "",
      total: 0,
      totalNum: 0,
      lastTime: {
        button: false
      },
      formDataSearch: {},
      unfixedTableThead: [
        {
          label: "合同编号",
          prop: "contractCode"
        },
        {
          label: "合同名称",
          prop: "contractName"
        },
        {
          label: "签订单位",
          prop: "partyAName"
        },
        {
          label: "供应商",
          prop: "partyBName"
        }
      ]
    };
  },
  created() {},
  methods: {
    handleTrim(key) {
      this.$set(
        this.formData,
        key,
        this.formData[key].replace(/(^\s*)|(\s*)$/g, "")
      );
    },
    beforeClose() {
      this.resetData();
      this.dialogTableVisibletextarea = false;
    },
    searchDataGetList() {
      if (
        this.formData.contractCode ||
        this.formData.contractName ||
        this.formData.partyAName ||
        this.formData.partyBName
      ) {
        this.pageNoCode = 1;
        this.formData.pageNo = 1;
        this.formDataSearch = this.formData;
        this.getList(this.formDataSearch);
      }
    },
    resetData() {
      this.pageNoCode = 1;
      this.pageSizeCode = 10;
      this.formData = {
        pageNo: 1,
        pageSize: 10
      };
      this.formDataSearch = {
        pageNo: 1,
        pageSize: 10
      };
      this.getList();
    },
    clickBtn() {
      if (this.reportInOrgId && this.reportInOrgId != "") {
        this.dialogTableVisibletextarea = true;
        this.getList();
      } else {
        this.$message({
          message: "请先选择填报单位",
          type: "error",
          duration: 2000,
          ccuiCustom: true
        });
      }
    },
    getList(reqObj) {
      let obj = {};
      obj = typeof reqObj == "object" ? reqObj : obj;
      obj.pageNo = this.pageNoCode;
      obj.pageSize = this.pageSizeCode;
      obj.isShowPageLoading = true;
      obj.reportOrgId = this.reportInOrgId;
      this.formData.reportOrgId = this.reportInOrgId;
      listSmpEquipmentForCheck(obj)
        .then(res => {
          this.tableData = res.data.data;
          this.totalNum = res.data.data.recordsTotal; // 总记录
          this.total = res.data.data.total; //页数
          this.pageNoCode = res.data.data.pageNo; // 当前页
          this.tableData.forEach(item => {
            item.button = false;
          });
        })
        .catch(e => {
          console.log(e);
        });
    },
    handleClick(val) {
      this.TableData = val;
      val.button = true;
      this.dialogTableVisibletextarea = false;
      this.$emit("inventoryConfirm", this.TableData);
    },
    handleSizeChange(val) {
      this.pageNoCode = 1;
      if (val !== "none") {
        this.pageSizeCode = val;
        setSessionItem("pageSize", this.tableName, val);
        this.formDataSearch.pageSize = val;
        this.formDataSearch.pageNo = this.pageNoCode;
      }
      this.getList(this.formDataSearch);
    },
    handleNodeClick(val) {
      this.$refs.tree.setCheckedKeys([]);
      this.$refs.tree.setCheckedKeys([val.id]);
    },
    handleCurrentChange(val) {
      let searchFormData = getSessionItem("pageNo", this.tableName) || {};
      setSessionItem("pageNo", this.tableName, {
        pageNo: val,
        searchForm: searchFormData.searchForm || {}
      });
      this.formDataSearch.pageNo = val;
      // 跳转翻页都会调这个方法
      this.pageNoCode = val;
      this.getList(this.formDataSearch);
    },
    internalCurrentPage(val) {
      val = 10;
    },
    handlePrev() {},
    handleNext() {},
    handleGoPage() {},
    search(searchData) {},
    change(index, key, value) {
      this.showIndex = index;
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .el-searchs-right > .el-input {
  width: 200px;
}
/deep/ .disabledBtn {
  // border: 1px solid #999 !important;
  span {
    color: #999 !important;
  }
}

.dialog-input .label {
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: right;
}

.dialog-input /deep/ .el-input {
  padding-bottom: 10px;
  width: 70%;
}
.dialog-top-left {
  width: 400px;
  padding-left: 25px;
  padding-right: 55px;
  padding-bottom: 10px;
}
.dialog-top-right {
  width: 400px;
}
::v-deep.el-pagination .el-pagination__jump .el-pagination__editor.el-input {
  width: 50px !important;
}
.el-select-dropdown.el-popper.ccui-paging-page-size-popper ::v-deep style {
  left: 400px !important;
}
.searchInput {
  width: 260px;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #4a4a4a;
  display: inline-block;
  font-size: inherit;
  height: 30px;
  line-height: 1;
  outline: 0;
  padding: 0 8px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 10px;
}
</style>
